<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">
<link rel="stylesheet" th:href="@{/static/lib/treegrid/jquery.treegrid.css}">
<link rel="stylesheet" th:href="@{/static/css/resource.css}">
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0 text-dark">资源管理</h1>
      </div><!-- /.col -->
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a th:href="@{../admin}">首页</a></li>
          <li class="breadcrumb-item active">系统管理</li>
          <li class="breadcrumb-item active">资源管理</li>
        </ol>
      </div><!-- /.col -->
    </div><!-- /.row -->
  </div><!-- /.container-fluid -->
</div>
<!-- Main content -->
<section class="content">
  <div class="card card-body">
    <div id="toolbar">
      <shiro:hasPermission name="resource:add">
        <button id="btn_add" type="button" class="btn btn-primary">新增</button>
      </shiro:hasPermission>
    </div>
    <table id="menuTable" class="mt-2" data-mobile-responsive="true" data-click-to-select="true"></table>
  </div>
</section>

<!-- 表单模态框 -->
<div class="modal fade" id="formModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="formTitle"></h5>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="formContent"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="saveOrUpdateBtn" onclick="saveOrUpdate()">保存
        </button>
      </div>
    </div>
  </div>
</div>

<script th:src="@{/static/lib/treegrid/jquery.treegrid.min.js}"></script>
<script th:src="@{/static/lib/treegrid/jquery.treegrid.extension.js}"></script>
<script th:src="@{/static/lib/treegrid/tree.table.js}"></script>
<script>

  var editFlag = Core.parseBool("[[${@perms.hasPerm('resource:edit')}]]");
  var deleteFlag = Core.parseBool("[[${@perms.hasPerm('resource:delete')}]]");

  /*保存模态框中选中的上级的菜单类型*/
  var detailMenuCheckedType;

  var treeTableConf = {
    id: "menuTable",
    table: null,
    columns: [
      {
        field: 'selectItem',
        radio: true,
      },
      {
        title: '菜单名称',
        field: 'name',
        width: '300px',
        align: 'left',
      },
      {
        title: '菜单URL',
        field: 'url',
        width: '300px',
        align: 'center',
      },
      {
        title: '权限标识',
        field: 'permission',
        width: '300px',
        align: 'center',
      },
      {
        title: '类型',
        field: 'type',
        align: 'center',
        width: '150px',
        formatter: function (row, index) {
          switch (row.type) {
            case 1 :
              return '<span class="badge badge-primary">目录</span>';
            case 2 :
              return '<span class="badge badge-secondary">菜单</span>';
            case 3 :
              return '<span class="badge badge-info">按钮</span>';
          }
        }
      },
      {
        title: '图标',
        field: 'icon',
        align: 'center',
        width: '150px',
        formatter: function (row, index) {
          if (row.type !== 3) {
            return '<i class="' + row.icon + ' fa-lg"></i>';
          } else {
            return "";
          }
        }
      },
      {
        title: '排序',
        field: 'sort',
        align: 'center',
        width: '100px'
      },
      {
        field: 'operation',
        title: '操作',
        align: "center",
        // width: '200px',
        formatter: function (row, index) {
          var edit = editFlag ? '<button class="btn-plain btn_edit" onclick="editRow(' + "'" + row.id + "'" + ')">编辑</button>' : '';
          var del = deleteFlag ? '<button class="btn-plain btn_del" onclick="deleteRow(' + "'" + row.id + "'" + ')">删除</button>' : '';
          return edit + del;
        }
      }
    ]
  }

  $(function () {
    var table = new TreeTable(treeTableConf.id, "/sys/resource/all", treeTableConf.columns, "id");
    table.setExpandColumn(1);
    table.setIdField("id");
    table.setCodeField("id");
    table.setParentCodeField("parentId");
    /*table.setExpandAll(true);*/
    table.setStriped(false);
    table.init();
    treeTableConf.table = table;
  })

  // 新增
  $('#btn_add').on('click', function () {
    Core.load("#formContent", "/load/resource", function () {
      $('#formTitle').text('新增')
      $("#formModal").modal('show');
    });
  })

  /*编辑*/
  function editRow(resourceId) {
    Core.load("#formContent", "/load/resource/" + resourceId, function () {
      $('#formTitle').text('编辑')
      $("#formModal").modal('show');
    });
  }

  function saveOrUpdate() {
    var $f = $('#permissionForm');
    var valid = $f[0].checkValidity();
    var url = "/sys/resource";
    var method = $f.find("input[name='id']").val() ? Core.putAjax : Core.postAjax;
    var type = $f.find("input[name='type']:checked").val();
    var parentType = $f.find("input[name='parentType']").val();
    var data = {
      id: $f.find("input[name='id']").val(),
      type: type,
      parentId: type === "1" ? 0 : $f.find("input[name='parentId']").val(),
      name: $f.find("input[name='name']").val(),
      url: $f.find("input[name='url']").val(),
      permission: $f.find("input[name='permission']").val(),
      sort: $f.find("input[name='sort']").val(),
      icon: $f.find("input[name='icon']").val()
    }
    if (valid) {
      if (parentType != null) {
        // 当前选中的菜单类型
        var detailMenuType = $f.find("input[name='type']:checked").val();
        if (detailMenuType === "2" && parentType !== "1") {
          layer.msg("上级资源只能是目录类型！")
          return;
        } else if (detailMenuType === "3" && parentType !== "2") {
          layer.msg("上级资源只能是菜单类型！")
          return;
        }
      }
      Core.mask("#saveOrUpdateBtn");
      method(url, data, function (data) {
        Core.unmask("#saveOrUpdateBtn");
        if (data.code === 1) {
          $("#formModal").modal("hide");
          treeTableConf.table.refresh();
        }
        layer.msg(data.message);
      }, function () {
        Core.unmask("#saveOrUpdateBtn");
      })
    }
    $f.addClass("was-validated")
  }


  /*删除*/
  function deleteRow(resourceId) {
    Core.confirm("确定删除该分类？", function () {
      Core.deleteAjax("/sys/resource", {"ids": resourceId}, function (data) {
        if (data.code === 1) {
          treeTableConf.table.refresh();
          layer.msg('删除成功');
        } else {
          layer.msg(data.message);
        }
      })
    })
  }


</script>